﻿@using viBook.Models
@model Book
<script id="ListChapterTemplate" type="text/html">
    <div class="span-4">
        <img></img>
        <span data-bind="text: ChapterName"></span>
        <br/>     
        <div class="document_thumbnail">
            <div class="standard-thumbnail" style="width: 135px">
                <div class="standard_thumbnail_shadow">
                    <a data-bind="attr: { href: '/Chapters/details/'+ Id()}">
                        <div class="thumbnail">
                            <img class="picture-small" data-bind="attr: {src: ChapterImage}" width="180" height="200">
                            <span class="no_of_pages notranslate" data-bind="text: NumberOfPage"/>
                        </div>
                    </a>
                </div>
            </div>
            <div style="width: 135px;">
              
                <p>
                    <span class="notranslate"  data-bind="text: Content"/> 
                </p>
            </div>
        </div>
    </div>
</script>
<script type="text/javascript">
    function Chapter(id, chapterName, chapterImage, numberOfPage, content) {
        return {
            Id: ko.observable(id),
            ChapterName: ko.observable(chapterName),
            ChapterImage: ko.observable(chapterImage),
            NumberOfPage: ko.observable(numberOfPage),
            Content: ko.observable(content)
        };
    }
   

    var initialChapterCollection = [
        @foreach (Chapter item in Model.Chapters)
        {
            <text>
                new Chapter(@item.Id, '@item.ChapterName', '@item.ChapterImage',@item.NumberOfPages,'@item.Content'),
            </text>
        }
    ];
    var viewmodel = {
        chapterCollection: ko.observableArray(initialChapterCollection),
        chapterTemplate: ko.observable("ListChapterTemplate")
        
    };

    ko.applyBindings(viewmodel);
</script>
